<template>
  <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />

  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="(item, index) in productDetailImg" :key="index">
      <img :src="item" style="width: 100%;" />
    </van-swipe-item>
  </van-swipe>

  <div>
    <p>{{ product.product }}</p>
    <p><span>￥</span>{{ product.price }}</p>
  </div>

  <!-- <div>
    <span>购买数量：</span>
    <van-button icon="minus" type="primary" size="small" color="blue" />
    <van-button type="primary" size="small" color="blue">{{ num }}</van-button>
    <van-button icon="plus" type="primary" size="small" color="blue" />
  </div> -->

  <van-action-bar class="bottom">
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" dot to="/customer"/>
    <van-action-bar-icon icon="cart-o" text="购物车" :badge="productNum" to="/cart"/>
    <van-action-bar-icon icon="star" text="收藏" :color="isActive?'red':'grey'" @click="onChangeColor" />
    <!-- color="#ff5000 -->
    <!-- <van-checkbox v-model="checked" shape="square">收藏</van-checkbox> -->
    <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
    <van-action-bar-button type="danger" text="立即购买" to="/cart"/>
  </van-action-bar>

  <van-notice-bar scrollable text="走过路过不要错过！汤臣优选欢迎你！爱你！么么哒！" />

  


</template>
<script setup lang="ts">
import { getProductDetailAll } from "@/hooks/detail";
import { ref ,} from "vue";


const {
  productNum,
    productDetailImg,
    product,
    onClickLeft,
    getProductDetail,
    onMounted,
    addCart,
    // buyProduct,
  }=getProductDetailAll()

  const checked = ref(true);
  let isActive=ref(false)
  const onChangeColor=()=>{
    isActive.value = !isActive.value

  }
</script>

<style lang="scss" scoped>
  .bottom{
    margin-bottom: 50px;
  }
  span{
    color: red;
  }
</style>